<template>
  <div class="course">
    <div class="tab">
        <ul class="tab-one" ref="tabOne">
            <li class="active" @click="fn(1)"><a href="javascript:;">黑白改图</a></li>
            <li @click="fn(2)"><a href="javascript:;">视频教学</a></li>
            <li @click="fn(3)"><a href="javascript:;">教程分享</a></li>
        </ul>
    </div>
    <ul class="content" ref="content">
        <li v-for="val in arrList" :key="val.t_content">
            <img :src="val.t_coverurl" alt="">
        </li>
    </ul>
    <div class="more">
        <a href="javascript:;" @click="add">加载更多</a>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
const { proxy } = getCurrentInstance()
const id = ref(1)
const content = ref(8)
const arrList = ref([])
const flag = ref(true)
const flag2 = ref(true)
async function showData (id, content) {
    arrList.value = []
    const { data } = await proxy.$http.get('https://yami.h5.yscase.com/yanjia/tutorial/data?catalog_id=' + id + '')
    console.log(data.data)
    data.data.some((val, i) => {
        if (i >= content) {
            return true
        }
        arrList.value.push(val)
        return false
    })
}
showData(id.value, content.value)
function fn (index) {
    console.log(proxy.$refs.tabOne.children)
    for (const k in proxy.$refs.tabOne.children) {
        if (proxy.$refs.tabOne.children[k] === 3) {
            break
        }
        console.log(proxy.$refs.tabOne.children[k])
        proxy.$refs.tabOne.children[k].className = ''
    }
    proxy.$refs.tabOne.children[index - 1].className = 'active'
    id.value = index
    content.value = 8
    proxy.$refs.content.style.height = '820px'
    if (index === 1) {
        if (!flag.value) {
            arrList.value = []
            showData(index, content.value)
            flag.value = true
            flag2.value = true
        } else {
            return true
        }
    } else if (index === 2) {
        if (flag.value) {
            arrList.value = []
            showData(index, content.value)
            flag.value = false
            flag2.value = true
        }
    } else if (index === 3) {
        if (flag2.value) {
            arrList.value = []
            showData(index, content.value)
            flag2.value = false
        }
    }
}
const index = ref(1)
function add () {
    index.value++
    content.value = 8 * index.value
    console.log(content.value)
    showData(id.value, content.value)
    proxy.$refs.content.style.height = 820 * index.value + 'px'
}
</script>

<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.course {
    background-color: #f4f4f4;
    padding-bottom: 92px;
    .tab {
        width: 100%;
        height: 48px;
        background-color: #373739;
        ul {
            width: 600px;
            height: 48px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            li {
                text-align: center;
                flex: 1;
                a {
                    font-size: 16px;
                    color: #f4f4f4;
                    line-height: 48px;
                }
            }
            .active {
                background-color: #2b2b2d;
            }
        }
    }
    .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 47px 330px 0;
        height: 820px;
        align-items: center;
        li {
            width: 300px;
            height: 400px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .more {
            width: 300px;
            height: 67px;
            background: #202022;
            margin: 100px auto 0;
            a {
              text-align: center;
              line-height: 67px;
              font-size: 21px;
              color: #fff;
              text-decoration: none;
            }
        }
}
</style>
